"use client"
import { Container, Flex, Heading, TextFieldInput } from "@radix-ui/themes"
import Image from "next/image"
import Logo from "@/public/logo.png"
import * as Form from "@radix-ui/react-form"
import { useCallback, FormEvent, useState } from "react"
import { FormMessage } from "@radix-ui/react-form"
import { gql, useApolloClient, useMutation } from "@apollo/client"
import UiButton from "@/components/ui/UiButton"
import { setCookie } from "@/lib/cookie"
import { useRouter, useSearchParams } from "next/navigation"

const Login = gql`
    mutation LoginAddressPassword($address:String!,$password:String!){
        loginAddressPassword(address:$address,password:$password){
            token
        }
    }
`

const AuthPage = () => {
    const [error, setError] = useState("");
    const { push } = useRouter();
    const query = useSearchParams();
    const client = useApolloClient();
    const [login, { loading }] = useMutation(Login, {
        onCompleted({ loginAddressPassword: { token } }, clientOptions) {
            const back = query.get("back") || "/home"
            setCookie("token", token, {
                path: '/',
                maxage: 7 * 24 * 60 * 60 * 1000
            })
            client.resetStore().then(() => push(back))
        },
        onError(error, clientOptions) {
            setError(error.message)
        },
    })
    const onSubmit = useCallback((event: FormEvent<HTMLFormElement>) => {
        event.preventDefault();
        setError("");
        const { address, password } = Object.fromEntries(new FormData(event.currentTarget));
        login({
            variables: {
                password,
                address
            }
        })
    }, []);
    return (
        <Container>
            <div className="w-96 ml-auto mr-auto mt-20 mb-10 m-auto">
                <div>
                    <Image
                        className="w-24 ml-auto mr-auto"
                        src={Logo}
                        alt="icon"
                    />
                </div>
                <Heading className="text-center">Bug窝子</Heading>
                <div className="text-center mb-6">创建Bug的窝子</div>
                <Flex gap="2" wrap="wrap" className="mb-6 text-left">
                    <Form.Root
                        onSubmit={onSubmit}
                        className="w-full"
                    >
                        <Form.Field className="mb-2 grid gap-1 w-full" name="address">
                            <Form.Control asChild>
                                <TextFieldInput
                                    size="3"
                                    min={3}
                                    max={20}
                                    placeholder="请输入账号"
                                    required
                                />
                            </Form.Control>
                            <FormMessage match="tooShort">Please enter a account of at least 3 to 20 characters</FormMessage>
                            <FormMessage match="tooLong">Please enter a account of at least 3 to 20 characters</FormMessage>
                        </Form.Field>
                        <Form.Field
                            className="mb-2 grid gap-1 w-full"
                            name="password"
                            serverInvalid={!!error}
                        >
                            <Form.Control asChild>
                                <TextFieldInput
                                    size="3"
                                    type="password"
                                    placeholder="请输入密码"
                                    required
                                    maxLength={20}
                                    minLength={6}
                                />
                            </Form.Control>
                            <FormMessage match="valueMissing">Please enter your password</FormMessage>
                            <FormMessage match="tooShort">Please enter a password of at least 6 to 20 characters</FormMessage>
                            <FormMessage match="tooLong">Please enter a password of at least 6 to 20 characters</FormMessage>
                            {!!error && <FormMessage>{error}</FormMessage>}
                        </Form.Field>
                        <UiButton
                            className="w-full"
                            loading={loading}
                        >
                            登录
                        </UiButton>
                    </Form.Root>
                </Flex>
            </div>
        </Container >
    )
}
export default AuthPage